<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\..\node_modules\vue\dist\vue.js"></script>
    <script src="..\..\node_modules\vue-router\dist\vue-router.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <p></p>
    <router-link to="/foo/hello">Go to Foo</router-link>
    <p></p>
    <router-link to="/foo/vue">Go to Vue</router-link>
    <p></p>
    <router-link to="/foo/sub/hello">Go to Sub</router-link>
    <p></p>
    <router-link to="/sth1">sth1</router-link>
    <p></p>
    <router-link to="/sth2">sth2</router-link>
    <p></p>
    <router-view></router-view>
</div>
</body>
<script type="application/javascript">
    // beforeRouteUpdate()比watch.$route()更早执行。
    const Foo = {
        template: '<div>{{$route.params.message + (!!$route.query.sign ? $route.query.sign : "!")}}</div>' ,
        watch: {
            $route(to, from) {
                console.log(to);
                console.log(from);
            }
        },
        beforeRouteUpdate(to, from, next) {
            console.log(to);
            console.log(from);
            next();
        }
    };
    const FooS = {
        template: '<div>Hello {{$route.params.message}}</div>',
        destroyed: function () {
            console.log("FooS destroyed");
        }
    };

    const All = { template: '<div><input type="input" @change="c"></div>',
        data:function(){
           return {changed:false};
        },
        watch: {
            $route(to, from) {
                console.log(to);
                console.log(from);
            }
        },
        beforeRouteUpdate(to, from, next) {
            console.log(to);
            console.log(from);
            next();
        },
        destroyed: function () {
            if(this.changed === true){
                window.prompt("Want to save?");
            }
        },
        methods:{
            c:function(){
                this.changed = true;
            }
        }
    };

    const routes = [
        { path: '/foo/:message', component: Foo },
        { path: '/foo/sub/:message', component: FooS },
        { path: '*', component: All }
    ];

    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    });

    const app = new Vue({
        router,
        data:{
            "message":"hello vue router"
        },
        //以下函数都没有入参，只能通过this获取Vue。
        //在方法中加断点，就可以看到不同阶段，初始化做了什么事情。

        //beforeXxx和Xxxed方法间，就是Vue执行Xxx的过程。
        //通过https://v2.cn.vuejs.org/v2/cookbook/adding-instance-properties.html中关于
        //“为实例 property 设置作用域的重要性”的beforeCreate、created描述，可以得知Vue实例的建立时间点。
        beforeCreate: function () {
            console.log("life cycle : beforeCreate");
        },
        created: function () {
            console.log("入参有data/element,可以修改。");
            console.log("life cycle : created");
        },
        //通过html/begin.html的“Vue.prototype.$author = function()”断点stack
        //可以看到执行Vue mount方法时，画面只有占位符，compute方法计算界面变量是mount的一部分。
        beforeMount: function () {
            console.log("life cycle : beforeMount");
        },
        mounted: function () {
            console.log("入参有element,可以修改。");
            console.log("life cycle : mounted");
        },

        //update方法就是Vue.data发生变化时的生命周期函数，如上分析。
        beforeUpdate: function () {
            console.log("life cycle : beforeUpdate");
        },
        updated: function () {
            console.log("入参有data/element,可以修改。");
            console.log("life cycle : updated");
        },

        //详细可以参考上面Component All的destroyed方法。
        //当我们选择用beforeXxx或Xxxed时，有一个标准就是，你确定Vue.Xxx方法执行后，
        //对你在生命周期回调中的影响吗？
        //比如destroy方法的执行，会在父Component中删除子Component，
        //并且删除所有子Component的event/listener,
        //这些操作对你的回调影响。
        beforeDestroy: function () {
            console.log("life cycle : beforeUpdate");
        },
        destroyed: function () {
            console.log("life cycle : updated");
        }
    }).$mount('#app');

</script>
</html>
